<script lang="ts" setup>
import { imagePath } from '@/libs/file-utils'

const img_invite = imagePath('main/community/invite.png')
const icon_same = imagePath('main/community/icon-same.png')
// const icon_match = imagePath('main/community/icon-match.png')
const icon_arrow = imagePath('icon-arrow-dbl.svg')

const toInvite = () => uni.navigateTo({ url: '/pages/community/friend/invite/index' })
const toGroupNormal = () => uni.navigateTo({ url: '/pages/community/group/normal/index' })
// const toGroupAdvanced = () => uni.navigateTo({ url: '/pages/community/group/advanced/index' })
</script>

<template>
  <!-- <div
    class="title"
    :style="{ backgroundImage: img_title }"
  ></div> -->

  <div
    class="invite"
    :style="{ backgroundImage: img_invite }"
    @click="toInvite"
  ></div>
  <div
    class="box"
    style="margin-top: 6rpx"
    @click="toGroupNormal"
  >
    <div
      class="icon"
      :style="{
        backgroundImage: icon_same
      }"
    ></div>
    <div class="name">同道蒜友</div>
    <div class="tip">同MBTI一键进群</div>
    <div class="go">
      开始探索
      <div
        class="arrow"
        :style="{ backgroundImage: icon_arrow }"
      ></div>
    </div>
  </div>
  <!-- <div
    class="box"
    style="margin-top: 36rpx"
    @click="toGroupAdvanced"
  >
    <div
      class="icon"
      :style="{
        backgroundImage: icon_match
      }"
    ></div>
    <div class="name">高匹配度</div>
    <div class="tip">匹配高的星座和MBTI付费进群</div>
    <div class="go">
      开始探索
      <div
        class="arrow"
        :style="{ backgroundImage: icon_arrow }"
      ></div>
    </div>
  </div> -->
</template>

<style lang="less" scoped>
.title {
  width: 170rpx;
  height: 90rpx;

  margin: 0 auto;
}

.invite {
  width: 733rpx;
  height: 477rpx;

  margin-top: 4rpx;
  margin-left: 14rpx;
}

.box {
  position: relative;
  width: 690rpx;
  height: 226rpx;

  margin: 0 auto;

  border-radius: 24rpx;
  background-color: #F2D1FF;
  box-shadow:
    0 2rpx 4rpx 0 rgba(255, 255, 255, .57) inset,
    0 0 8rpx 0 rgba(70, 0, 48, .25) inset,
    0 4rpx 16rpx 0 rgba(197, 62, 255, .44);

  .icon {
    position: absolute;
    top: 58rpx;
    left: 36rpx;

    width: 112rpx;
    height: 112rpx;

  }

  .name {
    position: absolute;
    top: 56rpx;
    left: 176rpx;

    color: #972A9A;
    font-size: 64rpx;
    line-height: 78rpx;
    text-shadow: 0 0 6rpx #fff, 0 0 6rpx #fff, 0 0 6rpx #fff, 0 0 6rpx #fff;
  }

  .tip {
    position: absolute;
    top: 134rpx;
    left: 176rpx;

    padding: 4rpx 16rpx;

    color: #450086;
    font-size: 24rpx;
    line-height: 34rpx;

    background-color: #fff;
    border-radius: 22rpx;
  }

  .go {
    position: absolute;
    top: 32rpx;
    right: 32rpx;

    color: #6C3797;
    font-size: 24rpx;
    line-height: 34rpx;

    display: flex;
    align-items: center;

    .arrow {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
